import React, { Component, Fragment } from "react";
// antd
import { message, Modal, Table, Button, Col, Pagination, Form, Input } from "antd";
// http
import http from '../../utils/request';
import { LeftOutlined } from '@ant-design/icons';
// router
import { Link } from "react-router-dom";
import Action from "@c/buttonAction/Index";


class SecurityScanDetail extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,
            search_filename: null,

            // 关键字
            keyword_name: null,
            delete_ignore_filename: null,
            delete_ignore_id: null,

            // 
            visible_add: false,
            visible_delete: false,

            // 表格
            dataSource: [],
            columns: [
                {title: "忽略文件", dataIndex: "filename", key: "filename"},
                {title: "操作", dataIndex: "operation", key: "operation", 
                render: (text, rowData) => {
                    return (
                        <div className="inline-button">
                            <Action>
                                <Action.Button onClick={() => this.onDeleteSecurityScanIgnoreFileBtn(rowData)}>删除</Action.Button>
                            </Action>
                        </div>
                    )
                }           
            }
            ],
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
    }

    componentDidMount() {
        const keyword_name = this.props.location.search.split('keyword=')[1]
        this.loadData(keyword_name)
    }

    loadData = (keyword_name) => {
        this.setState({
            loading: true,
            keyword_name: keyword_name
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'filename__contains': this.state.search_filename,
        }
        // 获取列表
        http.get('/security/scandetail/' + keyword_name, {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData(this.state.keyword_name)
        })
    }

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_filename: data.filename ? data.filename : null,
            page: 1
        })
        this.loadData(this.state.keyword_name)
    }

    // 添加扫描关键字
    onAddSecurityScanIgnoreFileBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    // 添加扫描关键字提交
    onFinishAdd = (data) => {
        const requestData = {
            filename: data.filename,
        }
        http.post('/security/scandetail/' + this.state.keyword_name, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData(this.state.keyword_name)
        }).catch()
    }

    // 添加扫描关键字取消
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 删除按钮 */
    onDeleteSecurityScanIgnoreFileBtn = (data) => {
        this.setState({
            delete_ignore_filename: data.filename,
            delete_ignore_id: data.id,
            visible_delete: true
        })
    }

    /** 删除扫描关键字提交 */
    handleSecurityScanIgnoreFileDelete = () => {
        const requestData = {
            id: this.state.delete_ignore_id,
        }
        http.put('/security/scandetail/' + this.state.keyword_name, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData(this.state.keyword_name)
        }).catch()    
    }

    render(){
        const { loading, columns, dataSource, page, total, visible_add, visible_delete, delete_ignore_filename, delete_ignore_id } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                
                <Link to="/index/security/scan">
                    <LeftOutlined style={{ fontSize: '24px', marginTop: '15px', marginBottom: '15px' }} />
                </Link>

                <Form layout="inline" onFinish={this.onFinishSearch}>  
                    <Form.Item label="搜索忽略文件" name="filename">
                        <Input placeholder="请输入文件名称"  />
                    </Form.Item>           

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Button type="primary" onClick={this.onAddSecurityScanIgnoreFileBtn}>添加忽略文件</Button>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="添加扫描忽略文件"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="文件" name="filename" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="删除文件"
                    visible={visible_delete}
                    onOk={this.handleSecurityScanIgnoreFileDelete}
                    onCancel={() => {this.setState({visible_delete: false, delete_ignore_filename: null, delete_ignore_id: null})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除扫描关键字<span style={{color: 'red'}}> {delete_ignore_filename}</span>? 删除后将无法恢复</p>
                </Modal>

            </Fragment>
        )
    }
}

export default SecurityScanDetail;